import React from "react";
import Button from 'antd/lib/button';
import Result from 'antd/lib/result';
import { ReloadOutlined } from '@ant-design/icons';

type ErrorPageProps = {
  error?: Error;
  onRetry?: () => void;
};

const ErrorPage: React.FC<ErrorPageProps> = ({ error, onRetry }) => (
  <Result
    status="error"
    title="页面出错了"
    subTitle={
      <div style={{ maxWidth: '800px', margin: '0 auto', textAlign: 'left' }}>
        <p>错误信息：{error?.message || "发生了未知错误"}</p>
        {error?.stack && (
          <details style={{ marginTop: '20px', whiteSpace: 'pre-wrap' }}>
            <summary style={{ cursor: 'pointer', color: '#1890ff' }}>
              查看详细错误信息
            </summary>
            <pre style={{ 
              marginTop: '10px',
              padding: '16px',
              backgroundColor: '#f5f5f5',
              borderRadius: '4px',
              fontSize: '14px'
            }}>
              {error.stack}
            </pre>
          </details>
        )}
      </div>
    }
    extra={[
      <Button
        key="retry"
        type="primary"
        onClick={onRetry || (() => window.location.reload())}
      >
        <ReloadOutlined /> 重试
      </Button>,
      <Button
        key="back"
        onClick={() => window.history.back()}
      >
        返回上一页
      </Button>
    ]}
  />
);

export default ErrorPage;
